<template>
    <div class="thumb-example">
        <el-form :inline="true">
            <el-form-item>
                <el-date-picker v-model="selTime" size="small" value-format="yyyy-MM-dd"
                    type="date" placeholder="请选择（日）" >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button  :icon="play? 'el-icon-video-pause':'el-icon-video-play'" size="mini" @click="handlePlay">{{play?'停止':'播放'}}</el-button>
            </el-form-item>
        </el-form>
        <div style=" width:225px; margin: 80px auto; margin-top:120px; "  v-show="imglist.length==0"  >
                <img src="../../../assets/images/wat_sywjg.png" style=" dispaly:block; width:225px; ">
            </div>
        <div class="sw_css" v-show="imglist.length!=0" v-loading="loading" >
            <!-- swiper1 -->
            <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop" v-if="imglist.length" >
                <swiper-slide v-for="(ew,index) in imglist" :key="index" >
                    <img class="picUrl" :src="ew.picUrl" >
                </swiper-slide>
                <div class="swiper-button-next swiper-button-white" slot="button-next" @click="swnext" ></div>
        		<div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="swprev" ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs" v-if="imglist.length"  >
                <swiper-slide v-for="(ew,index) in imglist" :key="index" >
                    <img style=" widht: 100%; height: 100%; " :src="ew.picUrl" >
                    <span>{{ew.uploadTime}}</span>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
import { gethisimg } from "@/api/waterManagement/StationPicR"
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

    export default {
        props:['czid'],
        name: 'swiper-img',
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOptionTop: {
                    loop: false,
                    loopedSlides: 5, // looped slides should be the same
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                    on:{
                        slideChangeTransitionEnd: ()=>{
                            this.topsetOptions()
                        }
                    }

                },
                swiperOptionThumbs: {
                    loop: false,
                    loopedSlides: 5, // looped slides should be the same
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                    on:{
                        slideChangeTransitionEnd: ()=>{
                            this.setOptions()
                        }
                    }
                },
                imglist:[],
                dateRange:[],
                selTime:'',
                loading: false,
                play:false,
                timer:null,
            }
        },
        mounted() {
            const _t = this;
            this.getlsimg(this.$props.czid);
        },
        methods: {
            handlePlay(){
                for (let i = 1; i < 100000; i++) {
                    clearInterval(i);
                }
                this.play = !this.play
                let index = this.$refs.swiperTop.$el.swiper.activeIndex;
                if(this.play){
                    if(index == (this.imglist.length-1)){
                        this.$refs.swiperTop.$el.swiper.slideTo(0, 1000, false);
                        this.$refs.swiperThumbs.$el.swiper.slideTo(0, 1000, false)
                    }
                   this.timer = setInterval(()=>{
                     this.$refs.swiperTop.$swiper.slideNext();
                   },2000);
                }else{
                    clearInterval(this.timer)
                }
            },
            handleQuery(){
                this.getlsimg(this.$props.czid);
            },
            getlsimg(czid){
                this.loading=true;
                var pd = {
                    statCd : czid,
                    selTime:this.selTime,
                }
                const _t = this;
                gethisimg(pd).then(response => {
                    const imglist = response.rows;
                    this.imglist = imglist
                    this.loading = false;
                });
            },
            swnext(){
                for (let i = 1; i < 100000; i++) {
                    clearInterval(i);
                }
                this.play = false
                this.$refs.swiperTop.$swiper.slideNext();
            },
            swprev(){
                for (let i = 1; i < 100000; i++) {
                    clearInterval(i);
                }
                this.play = false
                this.$refs.swiperTop.$swiper.slidePrev();
            },
            setOptions: function() {
                let index = this.$refs.swiperThumbs.$el.swiper.activeIndex;
                this.$refs.swiperTop.$el.swiper.slideTo(index, 1000, false);
                clearInterval(this.timer)
                for (let i = 1; i < 100000; i++) {
                    clearInterval(i);
                }
                this.play = false
            },
            topsetOptions: function() {
                let index = this.$refs.swiperTop.$el.swiper.activeIndex;
                if(this.$refs.swiperThumbs.$el.swiper){
                    this.$refs.swiperThumbs.$el.swiper.slideTo(index, 1000, false)
                }
                if(index == (this.imglist.length-1) && this.play){
                    for (let i = 1; i < 100000; i++) {
                        clearInterval(i);
                    }
                    setTimeout(() => {
                        this.$refs.swiperTop.$el.swiper.slideTo(0, 1000, false);
                        this.$refs.swiperThumbs.$el.swiper.slideTo(0, 1000, false)
                    },1000)

                    setTimeout(() => {
                        this.timer = setInterval(()=>{
                            this.$refs.swiperTop.$swiper.slideNext();
                        },2000);
                    },2000)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .picUrl{
        width: 530px;
    }
    .sw_css{
        border: 1px solid #d3d2d2;
        
        padding: 10px;
        .swiper {
            .swiper-slide {
                background-size: cover;
                background-position: center;
                text-align: center;
            }
            &.gallery-top {
                height: 60%;
                width: 100%;
            }
            &.gallery-thumbs {
                min-height: 100px;
                box-sizing: border-box;
                padding: 5px;
                margin-top: 1%;
                border: 1px solid #d3d2d2;
            }
            &.gallery-thumbs .swiper-slide {
                width: 25%;
                min-height: 100px;
                opacity: 0.4;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            &.gallery-thumbs .swiper-slide-active {
                opacity: 1;
            }

        }
    }
</style>
